<template>
  <view
    class="i-formItem"
    :class="{ align: align !== 'left', alignLft: align === 'left' }"
    :style="{ alignItems, borderBottom: borderBottom, padding, justifyContent }"
    @click.stop="handleClick"
  >
    <view v-if="right" class="item_top">
      <text class="title" :style="titleStyle"
        ><text v-if="isRequire" class="x">*</text>{{ title }}</text
      >
      <text class="content" :style="contStyle">{{ content }}</text>
      <image src="../../static/images/right_black_icon.png" mode=""></image>
    </view>
    <view
      v-else
      class="item_title"
      :class="{ lBlod: lBlod }"
      :style="titleStyle"
      ><text v-if="isRequire" class="x">*</text>{{ title }}</view
    >
    <view :class="{ formItem_body: border }" class="alignLft_body">
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from "vue";
defineProps({
  justifyContent: {
    type: String,
    default: "space-between",
  },
  title: {
    type: String,
    default: "",
  },
  titleStyle: {
    type: String,
    default: "white-space: nowrap",
  },
  align: {
    type: String,
    default: "left",
  },
  alignItems: {
    type: String,
    default: "left",
  },
  borderBottom: {
    type: String,
    default: "1rpx solid #F0F0F2",
  },
  border: {
    type: Boolean,
    default: true,
  },
  padding: {
    type: String,
    default: "24rpx 0",
  },
  right: {
    type: Boolean,
    default: false,
  },
  content: {
    type: String,
    default: "",
  },
  contStyle: {
    type: [String, Object],
    default: "",
  },
  lBlod: {
    type: Boolean,
    default: false,
  },
  isRequire: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["click"]);
const handleClick = () => {
  emit("click");
};
</script>

<style lang="scss" scoped>
.i-formItem {
  width: 100%;
  @include flexR;

  .item_title {
    @include dfont;
    width: 25%;
    white-space: nowrap;
    @include flexR;
  }

  .lBlod {
    @include titlefont(28rpx);
  }
}

.align {
  @include flexC;
  align-items: flex-start;

  .item_title {
    margin-bottom: 8rpx;
  }
}
.alignLft {
  .alignLft_body {
		flex: 1;
		width: 100%;
	}
}

.item_top {
  @include dfont;
  @include flexRS;
  width: 100%;

  .title {
    @include warp;
  }

  image {
    width: 48rpx;
    height: 48rpx;
  }
}

.content {
  width: 55%;
  @include dfont;
  color: $content-color;
}

.x {
  color: #ff453a;
}
.formItem_body {
  border: 1px solid #eeeeee;
  border-radius: 16rpx;
  padding: 12rpx 24rpx;
  box-sizing: border-box;
  margin-top: 12rpx;
  width: 100%;
}
</style>
